<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样本运行图</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="样本运行图">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<script type="text/javascript" src="../../script/chart-import.js"></script>
<style type="text/css">
html, body {height: 100%;}
.chart_container{width: calc(100% - 20px); height: calc(100% - 30px); padding: 20px 10px 10px 10px;}
#chart{width: 100%; height: 100%;}
</style>
</head>
<body id="sampleRunning">
<div class="chart_container">
	<div id="chart"></div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
	el: "#sampleRunning",
	data: {
		ckConfig: {},
		sampleData: [],
		myChart: null
	},
	init: function() {
		var _self = this;
		this.$nextTick(function() {
			_self.getChartData(_self);
		});
	},
	methods: {
		renderChart: function(_self, data) {
			//console.log(data);
			//console.log(_self.ckConfig);
			var xAxisData = [];
			var seriesData = [];
			var maxArr = [];
			var precision = _self.ckConfig.PRECISION || 0;
			var usl = _self.ckConfig.SPECIFICA_UPPER;
			var target = _self.ckConfig.TARGET_VAL;
			var lsl = _self.ckConfig.SPECIFICA_LOWER;
			var markLineData = [];
			$.each(data, function(i, v) {
				var subgroup = data[i].SUBGROUP.split(",");
				$.each(subgroup, function(j, u) {
					xAxisData.push(i + 1);
					seriesData.push(u);
				});
			});
			maxArr = _.concat([], seriesData);
			maxArr.push(usl);
			maxArr.push(target);
			maxArr.push(lsl);
			
			if(usl || usl === 0){
				markLineData.push({
					name: "USL",
					yAxis: usl,
					label: {
						formatter: "{b} = {@USL}"
					}
				});
			}
			if(target || target === 0){
				markLineData.push({
					name: "Target",
					yAxis: target,
					label: {
						formatter: "{b} = " + target
					}
				});
			}
			if(lsl || lsl === 0){
				markLineData.push({
					name: "LSL",
					yAxis: lsl,
					label: {
						formatter: "{b} = {@LSL}"
					}
				});
			}
			
			var option = {
				tooltip: {
					show: true,
					trigger: "axis"
				},
				grid: {
					right: '100px'
				},
				xAxis: [{
					type: "category",
					axisTick: {
						alignWithLabel: true
					},
					data: xAxisData
				}],
				yAxis: [{
					type : "value",
					max: _.ceil(_.max(maxArr), precision),
					min: _.floor(_.min(maxArr)*0.98, precision),
					splitLine: {
						show: false
					}
				}],
				dataZoom: [
                        {
                            type: 'inside',
                            start: 0,
                            end: 100
                        },
                        {
                            show: false,
                            type: 'slider',
                            y: '98%',
                            start: 0,
                            end: 100
                        }
                    ],
				series: [{
					type: "line",
					data: seriesData,
					lineStyle: {
						color: "#4876FF"
					},
					markLine: {
						symbol: "none",
						label: {
							position: "end"
						},
						lineStyle: {
							color: "#00CD00"
						},
						data: markLineData
					}
				}]
					
			};
			_self.myChart = echarts.init(document.getElementById('chart'));
			_self.myChart.setOption(option); 
		},
		resizeChart: function() {
			this.myChart.resize();
		},
		getChartData: function(_self) {
			_self.sampleData =  $.extend([], window.parent.vm.sampleData);
			_self.ckConfig = window.parent.vm.ckConfig;
			_self.renderChart(_self, _self.sampleData);
		}
	}
});
</script>
</html>